<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HEAD>
<TITLE>知恵袋 q12114786152  classに設定された画像の表示順番を変更するというのはできますでしょうか？ </TITLE>
<base href="http://kiyoto777.web.fc2.com/" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
function control_images(selectors,controls,fadeSpeed){   // ○　画像制御関数
 var  active_img,controls_img;
 active_img=$(selectors + " img.active");            // 現在表示の画像(★)
 switch (controls){                                  // 指示された画像のオブジェクト設定
  case "next":                                       // next
    controls_img = active_img.next();
    break;
  case "prev":                                       // prev
    controls_img = active_img.prev();
    break;
  case "first":                                      // first
    controls_img = $(selectors + " img:first");
    break;
  case "last":                                       // last
    controls_img = $(selectors + " img:last");
    break;
  default:                                           // その他指定なし
    controls_img = active_img.next();
    break;
 }
 if(typeof controls_img.attr("src")=="undefined"){   // next prevが見つからない場合は？
  if(controls=="next"){                              // 現在表示が最後のケース
    controls_img=$(selectors + " img:first");
  }
  if(controls=="prev"){                              // 現在の表示が最初のケース
    controls_img=$(selectors + " img:last");
  }
 }
 active_img.addClass("last-active");                 // 現在表示の画像(★)を最後の画像にする。
 controls_img.css({opacity: 0.0}).addClass('active') // 指示された表示の画像(■)を現在の一番上の画像とする。
   .animate({opacity: 1.0}, fadeSpeed,               // 指示された画像(■)を徐々に表示させる。
    function() {
     active_img.removeClass('active last-active');   // 完了したら現在表示の画像(★)を通常画像にする。
    });
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#layout_b img').draggable();// ドラッグ＆ドロップアウト（自動移動）の実行(初期)
});
</script>
<style type="text/css">
body{ /* 全体 */
background-color:#000000;
color:#ffffff;
}
#layout_b{                /* 画像表示エリア */
width:100px;
height:100px;
border:2px solid #ff0000;
display:block;
position:relative;        /* 相対配置 */
margin:auto;
}
#layout_b img{            /* 通常画像 */
position:absolute;        /* 絶対配置 */
top:0;                    /* 位置     */
left:0;                   /* 位置     */
z-index:8;                /* 重なりの優先度 */
}
#layout_b img.active{     /* 表示中画像 */
z-index:10;               /* 重なりの優先度 */
}
#layout_b img.last-active{/* 表示切り替え時画像 */
z-index:9;                /* 重なりの優先度 */
}
#left{/* 左エリア */
width:800px;
display:block;
}
</style>
</HEAD>
<body>
<div id="container">
 <div id="left">
  <span id="layout_b">
    <img alt="P0" src="./test/gaz0.gif" class="active">
    <img alt="P1" src="./test/gaz1.gif">
    <img alt="P2" src="./test/gaz2.gif">
    <img alt="P3" src="./test/gaz3.gif">
    <img alt="P4" src="./test/gaz4.gif">
    <img alt="P5" src="./test/gaz5.gif">
    <img alt="P6" src="./test/gaz6.gif">
  </span>
  <div id="thumbnail" align="center">
   <table id="thumbs_b">
    <TD class="td3"><input type="radio" name="select" id="last"  onClick="control_images('#layout_b','last',1000)"><label for="last">最後尾へ</label></TD>
    <TD class="td3"><input type="radio" name="select" id="next"  onClick="control_images('#layout_b','next',1000)"><label for="next">一つ後ろへ</label></TD>
    <TD class="td3"><input type="radio" name="select" id="prev"  onClick="control_images('#layout_b','prev',1000)"><label for="prev">一つ前へ</label></TD>
    <TD class="td3"><input type="radio" name="select" id="first" onClick="control_images('#layout_b','first',1000)"><label for="first">最前列へ</label></TD>
   </table>
  </div>
 </div>
</div>
</body>
</HTML>
